<template>
    <div id="deviceAdd" class="content">
        <!-- 页面标题 -->
        <div class="tilte-bar">新增设备</div>
        <div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd weui-cell-width"><label class="weui-label weui-cell-width">设备类型(必填)：</label></div>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd_1">
                        <select class='weui-select' v-model="deviceTypeId">
                            <option disabled value="">请选择</option>
                            <option v-for="deviceType in deviceTypeList" :value="deviceType">{{deviceType.device_type_name}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd weui-cell-width"><label class="weui-label weui-cell-width">检验依据：</label></div>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd_1">
                        <select class='weui-select' v-model="addDeviceInfo.reference">
                            <option disabled value="">请选择</option>
                            <option v-for="(referenceItem, index) in referenceList" :value="referenceItem">{{referenceItem[index]}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color" v-if="monitor_status_flag">
                <div class="weui-cell__hd weui-cell-width"><label class="weui-label weui-cell-width">监控状态：</label></div>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd_1">
                        <select class='weui-select' v-model="addDeviceInfo.monitor_status">
                            <option disabled value="">请选择</option>
                            <option value="0">无监控系统</option>
                            <option value="1">有监控系统</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd weui-cell-width"><label class="weui-label weui-cell-width">设备出厂编号：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入设备出厂编号"  v-model="addDeviceInfo.device_manufac_code">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd weui-cell-width"><label class="weui-label weui-cell-width">型号规格：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入型号规格(必填)"  v-model="addDeviceInfo.type_specification">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd weui-cell-width"><label class="weui-label weui-cell-width">检验类别：</label></div>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd_1">
                        <select class='weui-select' v-model="addDeviceInfo.check_type_id">
                            <option disabled value="">请选择</option>
                            <option v-for="checkType in checkTypeList" :value="checkType.check_type_code">{{checkType.check_type_name}}</option>
                        </select>   
                    </div>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd weui-cell-width"><label class="weui-label weui-cell-width">安装高度：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" placeholder="请输入安装高度"  v-model="addDeviceInfo.install_height">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd weui-cell-width"><label class="weui-label weui-cell-width">自编号：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入自编号"  v-model="addDeviceInfo.self_code">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd weui-cell-width"><label class="weui-label weui-cell-width">检验费用：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" placeholder="请输入检验费用"  v-model="addDeviceInfo.device_charge">
                </div>
            </div>
            <!-- 下一步按钮 -->
            <div>
                <div v-if="warnningTag" class="button-warnning">请完善资料</div>
                <a href="javascript:;" class="weui-btn weui-btn_primary margin-1" @click="submitDevice">下一步</a>
            </div>

        </div>
    </div>
</template>

<script>
    import qs from 'qs'
    export default {
        data() {
            return {
                // 设备类型列表和用户选择的设备类型
                deviceTypeList: [],deviceTypeId: '',
                // 检验依据列表和用户选择的检验依据
                referenceList: [],
                //检验类别列表
                checkTypeList: "",
                // 设备详细信息
                addDeviceInfo: {
                    deviceTypeId: '',
                    reference: '',
                    monitor_status: "",
                    device_manufac_code: "",
                    type_specification: "",
                    check_type_id: "",
                    install_height: "",
                    self_code: "",
                    device_charge: ""
                },
                // 警告信息
                warnningTag: false,
                // 监控状态 显示标志
                monitor_status_flag: false,
            }
        },
        mounted() {
            this.showCheckTypeList(),
            this.showDeviceTypeList()
        },
        watch: {
            // 根据设备类型显示协议列表
            deviceTypeId: function() {
                let _self = this;
                _self.monitor_status_flag = false;
                _self.addDeviceInfo.reference = '';
                _self.referenceList = [];
                // 只有设备类型为塔式起重机是，才显示监控状态
                if(_self.deviceTypeId.device_type_id === '1') {
                    _self.monitor_status_flag = true;
                }
                // 填充检验依据下拉列表
                _self.$http({
                    method: 'post',
                    url: 'reference',
                    data: qs.stringify({
                        'device_type_id': _self.deviceTypeId.device_type_id
                    })
                }).then( response => {
                    let data = response.data.data;
                    _self.referenceList = data.map(
                        function(value, index) {
                            let r = {};
                            r[index] = value;
                            return r;
                        } 
                    )
                })
            }
        },
        methods: {
            //显示检验类别列表
            showCheckTypeList: function(){
                let _self = this;
                _self.$http({
                    method: 'post',
                    url: 'checkType'
                }).then( response => {
                    let data = response.data.data;
                    _self.checkTypeList = data;
                })
            },
            // 显示设备类型列表
            showDeviceTypeList: function() {
                let _self = this;
                _self.$http({
                    method: 'post',
                    url: 'deviceType'
                }).then( response => {
                    _self.deviceTypeList = response.data.data;
                })
            },
            // 提交设备信息
            submitDevice: function() {
                let _self = this;
                _self.warnningTag = false;
                _self.addDeviceInfo.deviceTypeId = _self.deviceTypeId;
                // 判断必选项是否填了
                if( _self.addDeviceInfo.deviceTypeId && _self.addDeviceInfo.type_specification) {
                    // debugger
                    // debugger
                    let deviceList = JSON.parse(window.localStorage.deviceList);
                    // console.log(deviceList)
                    deviceList.push(_self.addDeviceInfo);
                    window.localStorage.deviceList = JSON.stringify(deviceList);
                    window.location.href = "./#/dev_main/list_add";
                } else {
                    _self.warnningTag = true;
                }
            }
        }
    }
</script>

<style scoped>
    .info-row span {
        width: 32%;
    }
    .margin-1 {
        margin: 1rem 0;
    }
    select {
        border: 0;
        outline: 0;
        max-width: 11rem;
    }
    .weui-select {
        padding-left: 0 !important;
        padding-right: 1.5rem !important;
        height: inherit !important;
        line-height: inherit !important;
    }
    .weui-cell__hd_1 {
        position: relative;
        display: inline-block;
    }
    .weui-cell__hd_1::before {
        content: '';
        width: .3rem;
        height: .3rem;
        position: absolute;
        display: inline-block;
        border-width: 0 .2rem .2rem 0;
        border-color: #C8C8CD;
        border-style: solid;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        right: .5rem;
        top: 50%;
        margin-top: -.4rem;
    }
</style>